<template>
	<view class="fans">
		<view class="fans-item" v-for="(item, key) in fansList" :key="item.user_id">
			<ListItem type="fans" :content="item" />
		</view>
		<view class="nolist ac" v-if="nodata">没有更多了...</view>
		<Tips v-if="fansList.length==0 && isInit" topTips="您还没有粉丝" bottomTips="赶紧去拍摄精彩视频吸引粉丝吧!" />
	</view>
</template>

<script>
	import {
		apiFansList
	} from '@/api/message'
	import ListItem from './components/ListItem'
	import Tips from './components/Tips'
	export default {
		components: {
			ListItem,
			Tips
		},
		data() {
			return {
				isInit: false,
				nodata: false,
				fansList: [],
				tempList: [],
				multipleList: [],
				page: 1,
				pageSize: 30
			}
		},
		onShow() {
			this.getFabulousList(true)
		},
		onReachBottom() {
			if (this.tempList.length < 30) {
				this.nodata = true
				return
			}
			this.page++
			this.getFabulousList()
		},
		methods: {
			getFabulousList(reset) {
				uni.showLoading()
				apiFansList({
					page: this.page,
					page_size: this.pageSize
				}).then(res => {
					this.isInit = true
					this.tempList = res.data.data
					// 判断数据是否重新渲染 否-将新数据追加至旧数组后
					let dataList = []
					if (reset) {
						dataList = res.data.data
						this.multipleList = []
					} else {
						dataList = this.tempList.concat(res.data.data)
					}
					dataList.forEach(item => {
						this.multipleList[item.user_id] = item
					})
					this.fansList = []
					// 按时间倒序
					let getSortData = this.multipleList.sort((a, b) => {
						return new Date(b.created_at.replace(/-/g,'/')) - new Date(a.created_at.replace(/-/g,'/'))
					})
					getSortData.forEach(item => {
						this.fansList.push(item)
					})
					uni.hideLoading()
				}).catch( err => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fans {
		padding-top: 40upx;

		.fans-item {
			margin-bottom: 60upx;
		}

		.nolist {
			height: 100upx;
			line-height: 100upx;
			margin-bottom: 20upx;
			width: 100%;
		}
	}
</style>
